<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>留言建议</title>
    <link rel="stylesheet" type="text/css" href="css/liuyan.css" />
    <style type="text/css">
        * {
            margin: 0px auto;
            padding: 0;
        }
        
        ul,
        li {
            list-style: none;
        }
        /*导航栏*/
        
        body {
            margin: 0;
        }
        
        input,
        textarea,
        select {
            padding: 0;
            margin: 0;
            background: none;
            outline: none;
        }
        
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            padding: 0;
            margin: 0;
            font-weight: 500;
        }
        
        ul,
        ol,
        dl,
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        p {
            margin: 0;
        }
        
        button {
            padding: 0;
            margin: 0;
        }
        
        .container {
            width: 1400px;
            height: 100%;
            margin: auto;
        }
        
        body {
            background: #FFFFFF;
            font: normal 100% Helvetica, Arial, sans-serif;
            margin: 0 auto;
        }
        
        #bg {
            background: #FFFFFF;
            width: 100%;
            height: 56px;
            margin: 0 auto;
            position: fixed;
            /*固定作用*/
            top: 0px;
            left: 0px;
        }
        
        nav {
            height: 28px;
            width: 100%;
            margin: 0 640px;
        }
        
        nav ul li {
            list-style-type: none;
            float: left;
            margin: 0 auto;
        }
        
        nav ul li a {
            text-decoration: none;
            display: block;
            width: 120px;
            line-height: 56px;
            text-align: center;
            color: #000000;
            font-family: 微软雅黑;
            font-size: 14px;
            white-space: nowrap;
        }
        
        nav ul li ul li {
            float: none;
        }
        /* 二级页面字体颜色*/
        
        nav ul li ul li a {
            font-size: 14px;
            color: #FFFFFF;
        }
        
        nav ul li a:hover {
            background: #FB3D40;
            color: #FFFFFF;
        }
        
        .visited {
            background: #FB3D40;
        }
        /*二级页面背景颜色*/
        
        nav ul li ul {
            background: #2A2828;
            display: none;
        }
        
        nav ul li:hover ul {
            display: block;
        }
        
        .logo {
            float: left;
            margin-top: -15px;
            margin-left: 200px;
        }
        /*主体*/
        
        .center {
            width: 100%;
            height: 1800px;
            background-color: #FFFFFF;
            margin: 0px auto;
            margin-top: 64px
        }
        
        .center-1 {
            width: 800px;
            height: 40px;
            margin: auto;
            font-size: 13px;
        }
        
        .center a {
            text-decoration: none;
            color: #000000;
            line-height: 25px;
        }
        
        .center-2 {
            width: 100%;
            height: 400px;
            background-color: #FFFFFF;
        }
        
        .center-3 {
            width: 900px;
        }
        
        .center-3 img {
            float: left;
            margin-top: 100px;
        }
        
        .center-3 p {
            padding: 100px;
        }
        
        .center-4 {
            width: 100%;
            height: 400px;
            background-color: #EEE;
        }
        
        .center-5 {
            text-align: center;
            line-height: 26px;
        }
        
        .center-5 h2 {
            padding: 50px;
        }
        
        .center-6 {
            width: 100%;
            height: 1000px;
            background-color: #FFFFFF;
        }
        
        .center-7 {
            width: 880px;
            margin: auto;
            height: 230px;
        }
        
        .center-7 img {
            float: left;
            margin-top: 50px;
        }
        
        .center-7 p {
            padding: 120px;
        }
        
        .center-7 h2 {
            text-align: center;
        }
        
        .center-8 {
            width: 880px;
            margin: auto;
            height: 230px;
        }
        
        .center-8 img {
            float: right;
        }
        
        .center-8 p {
            margin: 100px 0px 0px 0px;
            width: 300px;
            position: relative;
            top: 100px;
            left: 80px;
        }
        
        .center-9 {
            width: 880px;
            margin: auto;
            height: 230px;
        }
        
        .center-9 img {
            float: left;
            margin-top: 50px;
        }
        
        .center-9 p {
            padding: 120px;
        }
        
        .center-9 h2 {
            text-align: center;
        }
        
        .visited {
            background: #FB3D40;
        }
        
        .foot {
            width: 100%;
            height: 280px;
            margin: 0 auto;
            background: #FFFFFF;
            color: #423B3C;
        }
        
        .foot ul {
            float: left;
            margin: 20px 0px 0px 12%;
            width: 130px;
            line-height: 30px;
        }
        
        .bq {
            width: 240px;
            margin-top: 10px;
        }
        
        .foot_1 {
            font-size: 20px;
            display: block;
            margin: 10px auto;
        }
    </style>
    <style type="text/css">
        .two {
            margin-top: 20px;
        }
        
        .two>li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100px;
            background: #fff;
            border-bottom: 1px solid #FB3D40;
        }
        
        .two>li:last-child {
            border-bottom: 0;
        }
        
        .two>li>div {
            text-align: center;
            width: 20%;
        }
        
        textarea {
            outline: none;
        }
        
        .two button {
            background-color: #FB3D40;
            border: none;
            color: #fff;
            height: 30px;
            width: 100px;
        }
        
        .three>ul>li>ul>a {
            color: #000000;
        }
    </style>
</head>

<body>

    <div id="bg">
        <img class="logo" src="imges/logo.png" width="216px">
        <nav>
            <ul>

                <li><a href="index.html">首页</a>

                </li>
                <li><a href="#">送给谁∨</a>
                    <ul>
                        <li><a href="menu_01.html">家人师长</a></li>
                        <li><a href="menu_02.html">挚友同学</a></li>
                        <li><a href="menu_03.html">商务职场</a></li>

                    </ul>
                </li>
                <li><a href="menu_04.html">男友礼物</a>

                </li>
                <li><a href="menu_05.html">女友礼物</a>

                </li>
                <li><a href="menu_06.html">发现礼物</a>

                </li>
                <li>
                    <a href="aboutUs.html">
							关于我们
						</a>

                </li>
                <li class="visited">
                    <a href="liuyan.html">
                        <font color="#FFFFFF">留言建议</font>
                    </a>
                </li>
                <li class="dr"><a href="login.html">登录注册</a></li>
                <li class="name" style="display: none;">
                    <a href="#"></a>
                </li>
                <li class="tuichu" style="display: none;"><a href="#">退出</a></li>
            </ul>
        </nav>
    </div>
    <div class="body" style="margin-top:100px;">
        <div class="container" style="display: block;">
            <div class="one" style="display: block;">
                <h3>留言建议</h3>
                <p>Leave A Message</p>
                <div>
                    <input type="text" placeholder="昵称" class="uname">
                    <input type="text" placeholder="邮箱地址" class="email">
                    <textarea placeholder="留言内容" class="nr"></textarea>
                    <button type="button" class="OK">结束留言</button>
                </div>
            </div>
            <h3 style="margin-top:50px;text-align:center;">网友留言展示</h3>
            <ul class="two">
                <li>
                    <div class="id">编号：<span>${item.id}</span></div>
                    <div class="title">昵称名：<span>${item.name}</span></div>
                    <div class="texts">内容：<span>${item.password}</span></div>
                </li>
            </ul>
            <div class="three" style="display: block;">
                <img src="imges/logo.png" style="width: 200px;">
                <ul>
                    <li>
                        <h4>花的力量：</h4>
                        <p>花开静谧无声，但是它的芳菲会使我们驻足停留;花落悄然无息，或许它的那份飘逸会使我们凝眉深思。岁月如花，笑看花开，静赏花落是人生的一种极致。</p>
                        <ul class="tb">
                        </ul>
                    </li>
                    <li>
                        <h4>工作时间：</h4>
                        <p>
                            周一 - 周五 ：09:00 -------------- 23:00
                            <br> 周六 - 周日 ：11:00 ------------ 23:00
                        </p>
                        <h4>订阅我们的消息：</h4>
                        <div class="input">
                            <input type="" placeholder="你的邮箱" />
                            <button type="button">提交</button>
                        </div>
                    </li>
                    <li>
                        <h4>选择类目：</h4>
                        <ul><a href="menu_01.html">家人师长</a></ul>
                        <ul><a href="menu_02.html">挚友同学</a></ul>
                        <ul><a href="menu_03.html">商务职场</a></ul>
                        <ul><a href="menu_04.html">男友礼物</a></ul>
                        <ul><a href="menu_05.html">女友礼物</a></ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <div class="foot">
        <ul type="none"><span class="foot_1">关于我们</span>
            <li>制作人员</li>
            <li>通讯</li>
            <li>常见问题</li>
        </ul>
        <ul type="none"><span class="foot_1">法律条款</span>
            <li>使用条款</li>
            <li>条款与条件</li>
            <li>隐私</li>
            <li>版权</li>
            <li>用户须知</li>

        </ul>
        <ul type="none"><span class="foot_1">企业</span>
            <li>企业地址</li>
            <li>相关版权</li>
            <li>福利采购</li>
        </ul>
        <ul type="none">
            <li><img src="imges/logo.png" width="230px"></li>
            <li class="bq">版权所有&copy;2022 礼物推荐网 营业执照 公司地址：商丘市梁园区商丘师范学院31号楼435室</li>
        </ul>
    </div>

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            var user;
            if (sessionStorage.getItem("user") != "") {
                user = JSON.parse(sessionStorage.getItem("user"));
            }
            if (user != null) {
                $('.dr').hide();
                $('.name').show();
                $('.name').find('a').html('欢迎 ' + user.quanxian + user.name + '!');
                $('.tuichu').show();
                $('.tuichu').click(function() {
                    sessionStorage.setItem("user", null);
                    user = null;
                    $('.dr').show();
                    $('.name').hide();
                    $('.tuichu').hide();
                });
            }

            function clearinput() {
                let uname = $('.uname').val('');
                // let email = $('.email').val('');
                let nr = $('.nr').val('');
            }
            GetData();

            function GetData() {
                $.ajax({
                    url: 'http://localhost:2380/api/Liuyan/ShowLuyan',
                    type: 'get',
                    datatype: 'json',
                    success: function(dt) {
                        $('.two').html('');
                        dt.forEach(function(item) {
                            $('.two').append(`
									<li>
										<div class="id">编号：<span>${item.id}</span></div>
										<div class="title">昵称名：<span>${item.uname}</span></div>
										<div class="texts">内容：<span>${item.nr}</span></div>
										<div class="texts">留言时间：<span>${item.createtime}</span></div>
										<div class="texts"><button bianhao="${item.id}" class="del">删除</button></div>
									</li>
								`)
                        })
                    }
                })
            }
            $('body').on('click', '.del', function() {
                if (user != null) {
                    if (user.quanxian == '管理员') {
                        let id = $(this).attr('bianhao');
                        $.ajax({
                            url: 'http://localhost:2380/api/Liuyan/DelLuyan',
                            data: {
                                id
                            },
                            type: 'get',
                            datatype: 'json',
                            async: false,
                            success: function(dt) {
                                if (dt == true) {
                                    alert('操作成功！');
                                    location.reload();
                                } else {
                                    alert('系统异常！');
                                }
                            }
                        })
                    } else {
                        alert('您的权限不够！操作失败！');
                    }
                } else {
                    alert('请先登录！');
                    location.href = 'login.html';
                }
            })
            $('.OK').click(function() {
                if (user != null) {
                    let uname = $('.uname').val();
                    let email = $('.email').val();
                    let nr = $('.nr').val();
                    let uid = 1;
                    var myDate = new Date();
                    let createtime = myDate.toLocaleDateString();
                    if (uname != '' && nr != '') {
                        $.ajax({
                            url: 'http://localhost:2380/api/Liuyan/AddLuyan',
                            data: {
                                uid,
                                uname,
                                nr,
                                createtime,
                                email
                            },
                            type: 'get',
                            datatype: 'json',
                            async: false,
                            success: function(dt) {
                                if (dt == true) {
                                    clearinput();
                                    alert('提交成功！谢谢您的宝贵意见！我们会尽快通过电子邮件方式回复您哦！');
                                    location.reload();
                                } else {
                                    alert('系统异常！');
                                }
                            }
                        })
                    } else {
                        alert('文本框不能为空！');
                    }
                } else {
                    alert('请先登录！');
                    location.href = 'login.html';
                }
            })
        })
    </script>
</body>

</html>